/*
 * 1. 모델 생성하기.
 * 2. Proxy 생성하기.
 *      2-1. Model 연결.
 *      2-2. reader생성.
 * 3. 스토어 생성후 proxy연결.
 * 4. 데이터 읽기.
 */

Ext.setup({
	tabletStartupScreen : "./tabletStartupScreen.png",
	phoneStartupScreen : "./phoneStartupScreen.png",
	tabletIcon : "./tabletIcon.png",
	phoneIcon : "./phoneIcon.png",
	glossOnIcon : true,
	statusBarStyle : "black",
	fullscreen : true,
	preloadImages : [],
	scope : this,
	onReady : function() {
		/*
		 * 1. 모델 생성하기.
		 */
		Ext.regModel('User', {
			fields : [ {
				name : 'id'
			}, {
				name : 'firstName',
				type : 'string'
			}, {
				name : 'lastName',
				type : 'string'
			}, ]
		});
		var objStoreListener = {
			add : function() {
				console.log("add_______");
			},
			beforeload : function() {
				console.log("beforeload______");
			},
			datachanged : function() {
				console.log("datachanged_____");
			},
			exception : function() {
				console.log("exception_______");
			},
			load : function(store, records, successful) {
				console.log("load___________");
				console.log(successful);
				console.log(records);
				loadData();
			},
			remove : function() {
				console.log("remove___");
			},
			update : function() {
				console.log("loadexception");
			}
		}
		/*
		 * 2. proxy생성. - 인스턴스를 만들어도 되고 Store에 직접 작성해도 됨. - Model이름을 프락시에 작성해도 되고
		 * Store에 직접 작성해도 됨.
		 */
		var objProxy = new Ext.data.AjaxProxy({
			url : '../json',
			type : 'ajax',
			// 2-1. model연결.
			model : 'User',
			// 2-2. reader 연결.
			reader : {
				type : 'json',
				totalProperty : "total",
				successProperty : "success",
				root : 'users'
			},
			listeners : {
				exception : function() {
					console.log("___________proxy_exception");
				}
			}
		});
		/*
		 * 3. 스토어 생성후 proxy연결.
		 */
		var objStore = new Ext.data.JsonStore({
			model : 'User',
        	encode: 'true',
        	proxy: objProxy, 
			listeners : objStoreListener
		});
		objStore.load();
		// 4. 데이터 접근.
		function loadData() {
			// 데이터 읽기.
			var record = objStore.getAt(0);
			console.log(record);
			console.log(record.firstName);
			console.log(record.data["lastName"]);
			// store에서 proxy 객체 접근하기.
			var objProxy = objStore.getProxy();
			console.log("proxy", objProxy);
			// proxy에서 redader객체 접근하기.
			var objReader = objProxy.getReader();
			console.log("objReader", objReader);
			// resultSet 구하기.
			var resultSet = objReader.readRecords(objReader.rawData);
			console.log("resultSet", resultSet);
		}
		

		/*
		 * 4.리스트 생성하기.
		 */
		var objList= new Ext.List({        
			store: objStore,
			selectedItemCls: "x-list-over",
			//아이템 템플릿
			itemTpl: '<div class="contact"> id : {id}, <br/>firstName : {firstName}, lastName : {lastName}</div>',
		});
		/*
		 * 5. Panel에 리스트 추가하기.
		 */
		new Ext.Panel({
			fullscreen: true,
			scroll: "vertical",
			layout: "fit",
			dockedItems: [ {
				dock : 'top',
				xtype: 'toolbar',
				title: 'Model Sample 3-Using Proxy'
			} ],
			items:objList
		})  
	}
});